<script setup lang="ts">
import {ref, reactive, inject, type Ref} from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import {postAdminLogin} from "@/apis/admin";

import {type FormInstance, message} from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';

import {type FormState, regexRule} from "./setting";

import {useRequest} from "vue-hooks-plus";
import {setToken} from "@/config";

const go:any = inject('go')
const formRef:Ref = ref<FormInstance>();
const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: false,
});
const onFinish = (values: FormState) => {
  //发送请求，请求登录
  go('/admin')
  postAdminLogin()
};
const onFinishFailed = ({errorFields}: any) => {
  message.error(`错误：${errorFields.map(({name}:any):string => name)}`,1)
};
//自定义校验规则
const validateName = async (_rule: Rule, value: string) => {
  if (!value){
    return Promise.reject('请输入账户');
  }
  if (!regexRule.uname.test(value)){
    return Promise.reject('6-16位数字与字母');
  }else {
    return Promise.resolve();
  }
};
const validatePass = async (_rule: Rule, value: string) => {
  if (!value){
    return Promise.reject('请输入密码');
  }
  if (!regexRule.pwd.test(value)){
    return Promise.reject('8位以上字符且包含数字、字母');
  }else {
    return Promise.resolve();
  }
};
const rules: Record<string, Rule[]> = {
  username: [{ required: true, validator: validateName, trigger: 'change' }],
  password: [{ required: true, validator: validatePass, trigger: 'change' }],
};
</script>

<template>
  <div class="form-content">
    <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
    >
      <a-form-item
          label="账号"
          name="username"
          has-feedback
      >
        <a-input v-model:value="formState.username">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
          label="密码"
          name="password"
          has-feedback
      >
        <a-input-password v-model:value="formState.password">
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item>
        <a-form-item name="remember" no-style>
          <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
        </a-form-item>
        <a-button type="link" class="login-form-forgot" @click="go('/forget')">忘记密码？</a-button>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" class="login-form-button">
          登 录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<style scoped lang="scss">
  .form-content{
    width: 32rem;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 2rem 4rem;
  }
  .login-form {
    max-width: 300px;
    margin: 0 auto;
  }
  .login-form-forgot {
    float: right;
  }
  .login-form-button {
    width: 100%;
  }
  .form-body{
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: 1rem;
    display: flex;
    align-items: center;
  }
</style>